<%--
  User: 19079,Date: 2020/12/17,time: 17:58
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>
<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css">
</head>
<body>
<div class="">
    <table id="roleTB" lay-filter="roleTB"></table>
</div>
<%--添加和授权按钮--%>
<script type="text/html" id="add">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" onclick="add()">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="add" onclick="grant()">角色授权</button>
    </div>
</script>
<%--修改和删除按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%--添加修改表单弹出层--%>
<div id="addf" style="display: none">
    <form class="layui-form" lay-filter="addf" style="padding: 40px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">角色编码</label>
            <div class="layui-input-block">
                <input type="text" name="rolecode"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="rolename"  class="layui-input">
            </div>
        </div>
    </form>
</div>
<div id="up" style="display: none">
    <form class="layui-form" lay-filter="up" style="padding: 40px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">角色编码</label>
            <div class="layui-input-block">
                <input type="hidden" name="id"  class="layui-input">
                <input type="text" name="rolecode"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="rolename"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="hidden" name="isstart1">
                <input type="checkbox"  name="isstart"lay-text="ON|OFF"  lay-skin="switch">
            </div>
        </div>
    </form>
</div>
<%--授权树--%>
<div id="tree" style="display: none;width: 500px;height: 300px"></div>
</body>
<script src="/webjars/layui/2.5.5/layui.js"></script>
<script>
    layui.use(["table",'element','form',"layer"],function (){
        let table=layui.table;
        table.render({
            elem:"#roleTB",
            id:"roleTB",
            url:"xt/jsgl/getAll",
            even:true,
            toolbar:"#add",
            cols:[[
                {type:"radio"},
                {title:"角色编码",field:"rolecode"},
                {title:"角色名称",field:"rolename"},
                {title:"创建时间",field:"creationtime"},
                {title:"创建人",field:"createdby"},
                {title:"修改时间",templet:function (row) {
                        return row.lastupdatetime==null?"暂未修改":row.lastupdatetime;
                    }},
                {title:"状态",templet:function (row) {
                        return row.isstart==1?"启用":"禁用";
                    }},
                {title: "操作",toolbar: "#barDemo"}
            ]]
        });
        table.on('tool(roleTB)',function ({data,event}){
            switch (event){
                case "update":
                    update(data);
                    break;
                case "del":
                    layui.layer.confirm("确定要删除？",function (index){
                        layui.layer.close(index);
                        del(data.id);
                    });
                    break;
            };
        });
    });
    function del(id){
        layui.use(['layer','jquery','table'],function () {
            let $=layui.$;
            let layer=layui.layer;
            $.post('xt/jsgl/del',{"id":id}).done(({msg})=>{
                layer.msg(msg);
                layui.table.reload("roleTB");
            });
        });
    }
    function add(){
        layui.use(["form",'jquery','layer'],function () {
            let layer=layui.layer;
            let $=layui.$;
            $("#addf form")[0].reset();
            layer.open({
                type: 1,
                content:$('#addf'),
                btn:['确定',"取消"],
                yes(){
                    let a=layui.form.val('addf');
                    $.post('xt/jsgl/add',{'rolename':a.rolename,"rolecode":a.rolecode})
                        .done(({msg})=>{
                            layer.close(layer.index);
                            layer.msg(msg);
                            layui.table.reload("roleTB");
                    });
                }
            });
        })
    }
    function update(data){
        layui.use(['form','layer','jquery'],function () {
            let layer=layui.layer;
            let $=layui.$;
            layui.form.val('up',data);
            layer.open({
                type:1,
                content:$("#up"),
                btn: ["确定","取消"],
                yes() {
                    let a=layui.form.val("up");
                    if ($(".layui-form-switch em").text()=="ON"){
                        a.isstart=1;
                    }else {
                        a.isstart=0;
                    }
                    $(".layui-form-switch").removeClass("layui-form-onswitch");
                    layer.close(layer.index);
                    $.post("xt/jsgl/update",a).done(({msg})=>{
                        layer.msg(msg);
                        layui.table.reload("roleTB");
                    });
                }
            });
        });
    }
    function grant(){
        layui.use(["layer",'jquery','tree','table'],function (){
            let $=layui.$;
            let tree=layui.tree;
            let layer=layui.layer;
            let table=layui.table;
            let da=table.checkStatus("roleTB").data;
            if (da.length==0){
                layer.alert("请选择一个角色授权！")
                return ;
            };
            let roleid=da[0].id;
            console.log(roleid);
            $.post('/xt/jsgl/tree',{"roleid":roleid}).done(({data})=>{
                tree.render({
                    elem: "#tree",
                    id:"tree",
                    showCheckbox:true,
                    data
                });
                layer.open({
                    type:1,
                    content:$("#tree"),
                    btn:["确定","取消"],
                    yes(){
                        let ids=[];
                        let node=tree.getChecked("tree");
                        // console.log(node);
                        for(let no of node){
                            ids.push(no.id);
                            for (let noo of no.children){
                                ids.push(noo.id);
                            }
                        }
                        // console.log(ids);
                        $.post("xt/jsgl/grant",`ids=${ids}&roleid=${roleid}`)
                            .done(({msg})=>{
                                layer.close(layer.index);
                                layer.msg(msg);
                            });
                    }
                })
            });
        })
    }
</script>
</html>
